<template>
	<gracePage headerBG="#FFFFFF" footerBg="#FFFFFF" :customHeader="false">
		<view slot="gBody" style="padding-bottom:120rpx;" class="grace-border-b">
			<!-- 轮播图 -->
			<swiper class="grace-swiper" autoplay="true" indicator-dots indicator-color="rgba(255, 255, 255, 1)" indicator-active-color="#3688FF" style="height:775rpx" interval="5000">
				<swiper-item class="grace-swiper-item" v-for="(item, index) in swiperItems" :key="index">
					<image style="height: 775rpx;" :src="gRequest.apiUrlImages + item.image" mode="scaleToFill" class="grace-swiper-image"></image>
				</swiper-item>
			</swiper>
			<!-- 商品标题 分享按钮 -->
			<view class="grace-product-padding">
				<text class="grace-product-title grace-bold">{{ goodsData.name }}</text>
				<view class="grace-nowrap grace-flex-vcenter">
					<text class="grace-product-price">{{ goodsData.price }}积分</text>
				</view>
			</view>
			<view class="grace-common-line"></view>
			<!-- 底部信息切换导航 -->
			<view class="grace-product-padding">
				<graceNavBar
					:items="navItems"
					lineHeight="80rpx"
					:isCenter="true"
					:currentIndex="active"
					:size="200"
					activeLineBg="#FF7900"
					textAlign="center"
					activeColor="#FF7900"
					activeLineWidth="200rpx"
					activeLineHeight="2rpx"
					:margin="10"
					@change="navChange"
				></graceNavBar>
			</view>
			<!-- 详情 请根据项目情况自行改进 可以使用 富文本-->
			<view class="grace-product-padding" :hidden="active == 1"><rich-text :nodes="goodsData.description"></rich-text></view>
			
			<!-- 属性选择 -->
			<graceBottomDialog :show="attrIsShow" @closeDialog="closeAttr">
				<form @submit="attrSubmit" style="box-sizing:border-box; padding:10rpx 25rpx;" class="grace-form" slot="content">
					<!-- 关闭按钮 -->
					<view class="grace-nowrap grace-flex-end"><text class="grace-icons icon-close" @tap="closeAttr"></text></view>
					<!-- 头部商品信息 -->
					<view class="grace-product-attr-info">
						<image
							class="grace-product-attr-info-image"
							mode="widthFix"
							src="https://img13.360buyimg.com/n7/jfs/t1/9085/2/12381/146200/5c371c5bE08328383/4f4ba51aed682207.jpg"
						></image>
						<view class="grace-product-attr-info-body">
							<text class="grace-product-attr-info-title">{{ goodsData.name }}</text>
							<text class="grace-product-attr-info-stone">库存 : 1999件</text>
						</view>
					</view>
					<!-- 属性列表区 -->
					<scroll-view style="height:700rpx;" scroll-y>
						<view v-for="(value,index) in options">
							<view class="grace-title grace-margin-top">{{value.option_name}}</view>
							<view>
								<graceSelectTags selectedColor="#FF0036" :items="value.option_value" type="radio"></graceSelectTags>
							</view>
						</view>
						<view class="grace-margin-top"><text class="grace-title">购买数量</text></view>
						<view style="margin-bottom: 40rpx;"><graceNumberBox :value="buyNum" v-on:change="buyNumChange"></graceNumberBox></view>
					</scroll-view>
					<view class="grace-product-attr-btn">
						<button type="warn" style="background-color:#FF0036;" class="grace-button grace-border-radius" formType="submit">立即兑换</button>
					</view>
				</form>
			</graceBottomDialog>
		</view>
		<!-- 底部 -->
		<view class="grace-space-between grace-flex-vcenter grace-bg-white" slot="gFooter">
			<view class="grace-grids grace-nowrap" style="width:300rpx;">
				<view class="grace-grids-items grace-relative" @tap="gohome" style="width: 150rpx;">
					<text class="grace-grids-icon grace-icons icon-home"></text>
					<text class="grace-grids-text grace-grids-text" @tap="goHome">首页</text>
				</view>
				<view class="grace-grids-items grace-relative" style="width: 150rpx;">
					<text class="grace-grids-icon grace-icons icon-kf3" style="font-size: 45rpx;color: #6b7375;"></text>
					<text class="grace-grids-text grace-grids-text">客服</text>
				</view>
			</view>
			<view class="grace-flex-end" style="width:400rpx;">
				<button type="warn" class="grace-footer-button" style="background:#E55D52;width: 100%;" @tap="buyNow">立即兑换</button>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceNavBar from '../../graceUI/components/graceNavBar.vue';
import graceBottomDialog from '../../graceUI/components/graceBottomDialog.vue';
import graceNumberBox from '../../graceUI/components/graceNumberBox.vue';
import graceSelectTags from '../../graceUI/components/graceSelectTags.vue';
import graceStar from '../../graceUI/components/graceStar.vue';
export default {
	data() {
		return {
			// 轮播图
			swiperItems: [],
			// 切换导航
			navItems: ['商品详情'],
			active: 0,
			// 模拟评论数据 (实际项目来自api请求)
			commentContents: [],
			// 购买选择属性层展示
			attrIsShow: false,
			colorTips: [{ name: '灰色', value: '灰色', checked: true }, { name: '银色', value: '银色', checked: false }],
			colorSelected: '灰色',
			typeTips: [{ name: '套餐一', value: '套餐一', checked: true }, { name: '套餐二', value: '套餐二', checked: false }, { name: '套餐三', value: '套餐三', checked: false }],
			typeSelected: '套餐一',
			options:[],
			buyNum: 1,
			goodsData: {},
			optionQuery: {},
			buyType:1
		};
	},
	onLoad: function(option) {
		this.optionQuery = option;
		this.gRequest.get(
			'/jifenproduct/productinfo',
			{
				product_id: option.product_id
			},
			res => {
				this.swiperItems = res.data.photos;
				this.goodsData = res.data;
				
				// this.options = res.data.options
				// for(let i = 0;i < this.options.length;i++) {
				// 	for (let j = 0; j < this.options[i].option_value.length; j++) {
				// 		this.options[i].option_value[j].name = this.options[i].option_value[i].option_value_name
				// 		this.options[i].option_value[j].value = this.options[i].option_value[i].option_id+"_"+this.options[i].option_value[i].option_value_id
				// 		this.options[i].option_value[j].checked = j==0 ? true :false
				// 	}
				// }
				uni.setNavigationBarTitle({
					title: res.data.name
				});
			}
		);
	},
	methods: {
		goToCart: function() {
			uni.switchTab({
				url: '../shoppingCard/shoppingCard'
			});
		},
		addToCart: function() {
			this.attrIsShow = true;
			this.buyType = 2
		},
		goHome: function() {
			uni.switchTab({
				url: '../index/index'
			});
		},
		// 分享
		share: function() {
			uni.showToast({ title: '请自行完善分享代码', icon: 'none' });
		},
		// 导航切换
		navChange: function(e) {
			this.active = e;
		},
		// 评论图片展示
		showImgs: function(commentsIndex, imgIndex) {
			uni.previewImage({
				urls: this.commentContents[commentsIndex].imgs,
				current: this.commentContents[commentsIndex].imgs[imgIndex]
			});
		},
		//打开属性视图
		buyNow: function() {
			this.attrIsShow = true;
			this.buyType = 1
		},
		// 关闭属性
		closeAttr: function() {
			this.attrIsShow = false;
		},
		// 购买数量变化
		buyNumChange: function(e) {
			this.buyNum = e[0];
		},
		// 属性提交
		attrSubmit: function(e) {
			let option_value = {}
			for(let i = 0;i < this.options.length;i++) {
				for (let j = 0; j < this.options[i].option_value.length; j++) {
					if(this.options[i].option_value[j].checked) {
						option_value[this.options[i].option_value[j].value.split("_")[0]] = this.options[i].option_value[j].value.split("_")[1]
					}
				}
			}
			if (!uni.getStorageSync('userInfo')) {
				uni.navigateTo({ url: '../login/login' });
				return;
			}
			if(this.buyType == 1) {
				this.goodsData.quantity =  this.buyNum
				this.goodsData.checked =  true
				uni.setStorage({
					key:"orderList",
					data: JSON.stringify([this.goodsData]),
					success:function(){
						uni.navigateTo({
							url: '../shoppingCard/pointOrderComfirm'
						});
					}
				})
			}
			//如果想关闭属性
			this.closeAttr();
		},
		// 返回首页
		gohome: function() {
			uni.switchTab({
				url: '../index/index'
			});
		}
	},
	components: { gracePage, graceNavBar, graceBottomDialog, graceSelectTags, graceNumberBox, graceStar }
};
</script>
<style>
.grace-common-line {
	height: 16rpx;
}
.grace-product-padding {
	padding: 20rpx 25rpx;
}
.grace-product-title {
	line-height: 44rpx;
	font-size: 28rpx;
}
.grace-product-share {
	width: 80rpx;
	height: 80rpx;
	text-align: center;
	font-size: 40rpx;
	color: #ff7900;
	line-height: 80rpx;
	flex-shrink: 0;
	margin-left: 12px;
}
.grace-product-share:after {
	width: 0;
	height: 0;
}
.grace-product-price {
	color: #ff7900;
	line-height: 60rpx;
	font-size: 30rpx;
	font-weight: bold;
}
.grace-product-info-img {
	width: 100%;
}
.grace-product-attr-info {
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #f1f1f3;
	padding-bottom: 26rpx;
}
.grace-product-attr-info-image {
	width: 120rpx;
	height: auto;
	margin-right: 10px;
	flex-shrink: 0;
}
.grace-product-attr-info-body {
	width: 700rpx;
}
.grace-product-attr-info-title {
	width: 100%;
	font-size: 28rpx;
	color: #333333;
	display: block;
}
.grace-product-attr-info-stone {
	width: 100%;
	font-size: 20rpx;
	margin-top: 8rpx;
	color: #666666;
	display: block;
}
.icon-close {
	font-size: 30rpx;
	line-height: 80rpx;
	color: #888888;
}
/* 调整宫格大小 */
.grace-grids-items {
	padding: 6rpx 0;
	width: 120rpx;
}
.grace-grids-icon {
	height: 50rpx;
	line-height: 50rpx;
	font-size: 40rpx;
	color: #6b7375;
}
.grace-grids-text {
	line-height: 28rpx;
	font-size: 20rpx;
	margin-top: 2px;
	color: #6b7375;
}
.grace-footer-active {
	color: #ff0036;
}
</style>
